import { useState, useEffect } from "react";
import { Select, Spin } from "antd";
import type { SelectProps } from "antd";

const options: SelectProps["options"] = [];

for (let i = 10; i < 36; i++) {
  options.push({
    value: i.toString(36) + i,
    label: i.toString(36) + i,
  });
}

const handleChange = (value: string | string[]) => {
  console.log(`Selected: ${value}`);
};

const RealTimeChart = () => {
  const [isSelectLoading, setSelectLoading] = useState(true);

  // setTimeout(() => {
  //   setSelectLoading(false)
  // }, 2000)
  // 修改后（安全写法）
  useEffect(() => {
    const timer = setTimeout(() => {
      setSelectLoading(false);
    }, 1000);
    return () => clearTimeout(timer); // 添加清理
  }, []);

  return (
    <div className="flex flex-col size-full">
      <div className="text-left">
        <Spin className="!m-2" spinning={isSelectLoading}></Spin>
        {isSelectLoading ? (
          "正在连接..."
        ) : (
          <div className="flex items-center">
            <div className="size-4 rounded-full bg-blue-500 m-2"></div>已连接
          </div>
        )}
      </div>
      <Select
        mode="multiple"
        size="middle"
        loading={isSelectLoading}
        placeholder="Please select"
        defaultValue={["a10", "c12"]}
        onChange={handleChange}
        className="w-80"
        options={options}
      />
    </div>
  );
};

export default RealTimeChart;
